<template>
     <!--使用多个组件时需要在最外侧添加一个div包裹起来-->
     <div>
            <city-header></city-header>
            <city-search :cities='cities'></city-search>
            <city-list
              :hotCities="hotCities"
              :cities="cities"
              :letter="letter"
              ></city-list>
            <city-aside :cities="cities" @change='hasOwnCity'></city-aside>
            <!--
            	在父组件中，通过@事件=‘事件’将携带的值存储在变量中，并将这个变量作为属性传递给目标组件
            -->
     </div>
</template>

<script>
    import CityHeader from '@/pages/city/components/Header'
    import CitySearch from '@/pages/city/components/Search'
    import CityList from '@/pages/city/components/List'
    import CityAside from '@/pages/city/components/Aside'
    import axios from 'axios'
    export default {
        name: "City",
        data () {
           return {
              hotCities : [],
              cities : {},
              letter : ''
           }
        },
    //    注册组件
        components: {
          CityHeader,
          CitySearch,
          CityList,
          CityAside
        },
      //定义方法
      methods: {
      	  //请求数据
            getCityInfo () {
              axios.get('/static/moke/city.json').then(this.getSucc);
            },
          //处理数据
            getSucc (res) {
              console.log(res.data);
              res = res.data;
              console.log(res);
              if(res.ret && res.data){
                const data = res.data;
                this.hotCities = data.hotCities;
                this.cities = data.cities;
              }
            },
            //接受由子组件传递过来的值
            hasOwnCity (letter){
            	this.letter = letter;//将传递过来的值赋给当前对象
            }
      },
      //钩子函数，一般是向后台请求数据并做一些数据处理
      mounted () {
        this.getCityInfo();
      }
    }
</script>

<style scoped>

</style>
